<script setup>
import { onMounted, ref } from 'vue'
import { getwarnList, deleteWarn, getWarnDetail } from '@/api/one'
import { message } from 'ant-design-vue'
import { setId } from '@/utils/storage.js'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'YitiganMWarningRecords'
})
const router = useRouter()
const columns = ref([
  {
    title: '序号',
    customRender: ({ index }) =>
      `${+index + 1 + pageParams.value.pageSize * (pageParams.value.page - 1)}`
  },
  { title: '一体杆名称', dataIndex: 'poleName' },
  { title: '一体杆编号', dataIndex: 'poleNumber' },
  { title: '故障类型', dataIndex: 'errorType' },
  { title: '处置状态', dataIndex: 'handleStatus' },
  { title: '告警时间', dataIndex: 'warningTime' },
  { title: '操作', dataIndex: 'operate' }
])
const list = ref([])
// 获取数据
const getwarnAPI = async () => {
  const res = await getwarnList(pageParams.value)
  list.value = res.data.rows
  totalCount.value = res.data.total
  // console.log(res)
  // console.log(res.data.total)
}
// 查询
const inquire = () => {
  getwarnAPI()
}
// 删除警告
const delwarnAPI = async (id) => {
  await deleteWarn(id)
  message.success('删除告警成功')
  getwarnAPI()
}
// 页码总数
const totalCount = ref(0)
const showTotal = () => {
  return `总共${totalCount.value}条`
}
const pageParams = ref({
  page: 1,
  pageSize: 10,
  poleName: '',
  poleNumber: '',
  handleStatus: ''
})
const changePage = (nwePage) => {
  pageParams.value.page = nwePage
}
// 点击详情
const getDetail = async (id) => {
  const res = await getWarnDetail(id)
  console.log(res)
  console.log(id)
  setId(res)
  router.push({
    path: '/part',
    query: {
      id: res.id
    }
  })
}
onMounted(() => {
  getwarnAPI()
})
</script>
<template>
  <a-card class="content">
    <!-- 搜索框 -->
    <div class="search">
      <a-form>
        <a-row type="flex" justify="start" :gutter="16">
          <a-col>
            <a-form-item label="一体杆名称" style="width: 100%">
              <a-input placeholder="请输入一体杆名称" v-model:value="pageParams.poleName"></a-input>
            </a-form-item>
          </a-col>
          <a-col>
            <a-form-item label="一体杆编号" style="width: 100%">
              <a-input
                placeholder="请输入一体杆编号"
                v-model:value="pageParams.poleNumber"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col>
            <a-form-item label="处置状态" style="width: 225px">
              <a-select
                placeholder="请选择处置状态"
                tyle="width: 100%"
                v-model:value="pageParams.handleStatus"
              >
                <a-select-option value="0" style="width: 100%">未派单</a-select-option>
                <a-select-option value="1" style="width: 100%">已派单</a-select-option>
                <a-select-option value="2" style="width: 100%">已接单</a-select-option>
                <a-select-option value="3" style="width: 100%">已完成</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col>
            <a-button type="primary" @click="inquire">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 表单 -->
    <div class="table">
      <a-table
        :dataSource="list"
        :columns="columns"
        :pagination="{
          total: totalCount,
          'show-total': showTotal,
          showQuickJumper: true,
          current: pageParams.page,
          pageSize: pageParams.pageSize,
          onChange: changePage
        }"
      >
        <!-- 操作 -->
        <template #bodyCell="{ column, record }">
          <a-space v-if="column.dataIndex === 'operate'">
            <a-button type="link" disabled>派单</a-button>
            <!-- <a-button type="link" @click="$router.push(`/part/${record.id}`)">详情</a-button> -->
            <a-button type="link" @click="getDetail(record.id)">详情</a-button>
            <a-popconfirm title="是否确认删除当前告警记录？" @confirm="delwarnAPI(record.id)">
              <a-button type="link" :disabled="record.handleStatus !== 3">删除</a-button>
            </a-popconfirm>
          </a-space>
          <template v-if="column.dataIndex === 'handleStatus'">
            <span v-if="record.handleStatus === 0">未派单</span>
            <span v-else-if="record.handleStatus === 1">已派单</span>
            <span v-else-if="record.handleStatus === 2">已接单</span>
            <span v-else-if="record.handleStatus === 3">已完成</span>
          </template>
        </template>
      </a-table>
    </div>
  </a-card>
</template>
<style>
.content {
  margin-top: 20px;
  margin-left: 25px;
}
.search {
  border-bottom: 1px solid rgb(227, 227, 227, 0.9);
}
.table {
  margin-top: 20px;
}
</style>
